<template>
 <div class="steep">
   <div class="card-search cardTop">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      
      <el-tab-pane label="正品" name="zhengpin"></el-tab-pane>
      <el-tab-pane label="次品" name="cipin"></el-tab-pane>
      <el-tab-pane label="外协" name="waixie"></el-tab-pane>
    </el-tabs>
   </div>
   <div class="card-table">
    <zhengpin v-if="zhengpinif" />
    <cipin v-if="cipinif" />
    <waixie v-if="waixieif" />
   </div>
 </div>
</template>

<script>
import zhengpin from './zhengpin.vue'
import cipin from './cipin.vue'
import waixie from './waixie.vue'
// import '@/mock/dataCenter.js'

export default {
  name: 'test',
  // mixins: [dataCenter],
  components: {
    zhengpin,
    cipin,
    waixie
  },
  data () {
    return {
      activeName: 'zhengpin',
      zhengpinif: true,
      cipinif: false,
      waixieif: false
    }
  },
  computed: {
  },
  created () {
    if (sessionStorage.getItem('activeTab')) {
      this.activeName = sessionStorage.getItem('activeTab')
      console.log('this', this.activeName)
      this.zhengpinif = false
      this.cipinif = false
      this.waixieif = false
      switch (sessionStorage.getItem('activeTab')) {
        case 'zhengpin':
          this.zhengpinif = true
          break
        case 'cipin':
          this.cipinif = true
          break
        case 'waixie':
          this.waixieif = true
          break
        default:
          break
      }
    } else {
      sessionStorage.setItem('activeTab', this.activeName)
    }
  },
  beforeRouteLeave (to, from, next) {
    sessionStorage.removeItem('activeTab')
    next()
  },
  mounted () {
  },
  methods: {
    handleClick (tab) {
      // console.log('tab', tab)
      sessionStorage.setItem('activeTab', tab.name)
      this.zhengpinif = false
      this.cipinif = false
      this.waixieif = false
      switch (tab.index) {
        case '0':
          this.zhengpinif = true
          break
        case '1':
          this.cipinif = true
          break
        case '2':
          this.waixieif = true
          break
        default:
          break
      }
    }
  }
}
</script>

<style  scoped>
.block{
  margin-top: 20px;
  text-align: right;
}
.steep {
  .cardTop {
    padding: 0 18px 0px;
    .el-tabs__header {
      width: 300px;
    }
  }
.card-table {
    .seachAndState {
      display: flex;
      justify-content: space-between;
      .stateClass {
        display: flex;
        height: 100%;
        padding: 5px 10px 10px 20px;
        width: 200px;
      }
    }
  }
}
</style>
